<!DOCTYPE html>
<html>
	<!--创建钱包2-->
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>登陆</title>
		<link rel="stylesheet" type="text/css" href="skin/css/reset.css"/>
		<link rel="stylesheet" type="text/css" href="skin/css/animate.css"/>
		<style type="text/css">
			#app{
				width: 100%;
				height: 100%;
				padding: 0;
			}
			#fixed-top{
				position: fixed;
				top:0;
				box-sizing: border-box;
				width:100%;
				padding: 0 24px;
				height: 370px;
			}
			#fixed-midd{
				position: fixed;
				top:370px;
				width: 100%;
				height: calc(100vh - 370px);
				box-sizing: border-box;
				padding: 0 24px;
				overflow: auto;
			}
			#fixed-midd::-webkit-scrollbar{
				width: 0;
				height: 0;
			}
			.hea{
				padding:20px 0;
			}
			.hea>h1{
				font-size: 40px;
				text-align: center;
			}
			.hea>p{
				padding: 10px 0;
				font-size: 15px;
				text-align: center;
				opacity: .6;
			}
			.eachers-wrap{
				height: 200px;
				background: #eee;
			}
			.tran-title{
				font-size:17px;
				padding-top: 20px;
				opacity: .6;
			}
			.info-wrap{
				display: flex;
				padding: 8px 0;
				border-bottom: 1px solid #eee;
			}
			.info-wrap>.info-img{
				flex: 0 0 40px;
				margin-right: 10px;
			}
			.info-wrap>.info-font{
				flex: 1 1 0;
				display: flex;
				flex-direction: column;
				justify-content: space-around;
			}
			.info-wrap>.yellow{
				color: #BE5946;
			}
			.info-wrap>.blue{
				color: #5DD6A5;
			}
			.info-wrap>.info-mon{
				flex: 0 0 75px;
				display: flex;
				align-items: center;
				justify-content: flex-end;
				font-size: 14px;
			}
			
			.no-data{
				display: flex;
				flex-direction: column;
				align-items: center;
				margin-top:200px;
				height: 100vh;
				width: 100vw;
			}
			
			#mask,#mask-par{
				position: absolute;
				top:0;
				bottom:0;
				left:0;
				right:0;
				z-index: 1;
			}
			#mask{
				background: rgba(0,0,0,.5);
			}
			#mask-par{
				display: flex;
				justify-content: center;
				align-items: center;
			}
			#mask-par>.ma-con{
				position: relative;
				width: 60%;
				padding:15px 10px 35px;
				background: white;
				border-radius: 10px;
			}
			#mask-par>.ma-con>h1{
				padding-bottom:15px;
				font-size: 16px;
				text-align:center;
				opacity: .6;
			}
			#mask-par>.ma-con>p{
				font-size: 14px;
				line-height: 25px;
				opacity: .6;
			}
			#mask-par>.ma-con>button{
				position: absolute;
				width: 80%;
				height: 35px;
				bottom: -18px;
				left:10%;
				background: #3573FA;
				border: none;
				outline: none;
				color: white;
				border-radius: 20px;
			}
			
			#mask-par>.mask-shar{
				position: absolute;
				bottom: 0;
				width: 100%;
				height: 140px;
				background: white;
			}
			#mask-par>.mask-shar>h3{
				padding: 15px;
				font-size:15px;
				text-align: center;
				opacity: .6;
			}
			#mask-par>.mask-shar>.shar-change{
				display: flex;
			}
			#mask-par>.mask-shar p{
				flex: 1 1 0;
			}
			#mask-par>.mask-shar .wei-share,
			#mask-par>.mask-shar .py-share{
				display: flex;
				flex-direction: column;
				align-items: flex-start;
			}
			#mask-par>.mask-shar .py-share{
				align-items: flex-end;
			}
			.animated{
				animation-duration: .4s;
				animation-fill-mode:both;
			}
		</style>
	</head>
	
	
	<body>
		<div id="app">
			<!--没有数据的块-->
			<div class="no-data" v-if='!have'>
				<img src="skin/img/no-data.png" width="120px" height="80px"/><br />
				<p style='opacity: .4;'>暂无数据</p>
			</div>
			<!--没有数据的块-->
			
			<!-- 有数据的块 -->
			<div v-else>
				<div id="fixed-top">
					<div class='hea'>
						<h1>0.1</h1>
						<p>=$ 4000.56</p>
					</div>
					<div class="eachers-wrap"></div>
					<h3 class='tran-title'>最近交易记录</h3>
				</div>
				<div id="fixed-midd">
					<div class="info-wrap">
						<div class="info-img">
							<img src="skin/img/jie-yellow.png" width='40px' height="40px"/>
						</div>
						<div class="info-font">
							<p>12345312+14122</p>
							<p><span>2018-7-20</span>&nbsp;&nbsp;&nbsp;<span>15:00:00</span></p>
						</div>
						<div class="info-mon yellow">
							-0.01BTC
						</div>
					</div>
					<div class="info-wrap">
						<div class="info-img">
							<img src="skin/img/jie-blue.png" width='40px' height="40px"/>
						</div>
						<div class="info-font">
							<p>12345312+14122</p>
							<p><span>2018-7-20</span>&nbsp;&nbsp;&nbsp;<span>15:00:00</span></p>
						</div>
						<div class="info-mon blue">
							-0.01BTC
						</div>
					</div>
					<div class="info-wrap">
						<div class="info-img">
							<img src="skin/img/jie-blue.png" width='40px' height="40px"/>
						</div>
						<div class="info-font">
							<p>12345312+14122</p>
							<p><span>2018-7-20</span>&nbsp;&nbsp;&nbsp;<span>15:00:00</span></p>
						</div>
						<div class="info-mon blue">
							-0.01BTC
						</div>
					</div>
					<div class="info-wrap">
						<div class="info-img">
							<img src="skin/img/jie-blue.png" width='40px' height="40px"/>
						</div>
						<div class="info-font">
							<p>12345312+14122</p>
							<p><span>2018-7-20</span>&nbsp;&nbsp;&nbsp;<span>15:00:00</span></p>
						</div>
						<div class="info-mon blue">
							-0.01BTC
						</div>
					</div>
					<div class="info-wrap">
						<div class="info-img">
							<img src="skin/img/jie-blue.png" width='40px' height="40px"/>
						</div>
						<div class="info-font">
							<p>12345312+14122</p>
							<p><span>2018-7-20</span>&nbsp;&nbsp;&nbsp;<span>15:00:00</span></p>
						</div>
						<div class="info-mon blue">
							-0.01BTC
						</div>
					</div>
					<div class="info-wrap">
						<div class="info-img">
							<img src="skin/img/jie-yellow.png" width='40px' height="40px"/>
						</div>
						<div class="info-font">
							<p>12345312+14122</p>
							<p><span>2018-7-20</span>&nbsp;&nbsp;&nbsp;<span>15:00:00</span></p>
						</div>
						<div class="info-mon yellow">
							-0.01BTC
						</div>
					</div>
				</div>
			</div>
			<!-- 有数据的块 -->
		</div>
		<script src='skin/js/jquery-3.3.1.min.js'></script>
		<script src="skin/js/vue.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="skin/js/comm.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			var app=new Vue({
				el:'#app',
				data:{
					have:false,//有无数据 false(没数据)  true(有数据)
				},
				methods:{
					
					
				}
			});
		</script>
	</body>
</html>


